<template>
    <div class="chaos-middle">
        <el-divider><span style="font-size:38px;">个人中心</span></el-divider>
        <div class="chaos-middle-content">
            <div class="chaos-middle-content-left">

                <div v-bind:class="{'chaos-navigater-is-selected': selectedUserNavigater===1 }" class="chaos-user-navigater" @click="clickNavigater(1)">
                    <icon name="chaos-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">我的信息</span>
                </div>

                <div v-bind:class="{'chaos-navigater-is-selected': selectedUserNavigater===2}" class="chaos-user-navigater" @click="clickNavigater(2)">
                    <icon name="chaos-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">我的头像</span>
                </div>

                <div v-bind:class="{'chaos-navigater-is-selected': selectedUserNavigater===3}" class="chaos-user-navigater" @click="clickNavigater(3)">
                    <icon name="chaos-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'chaos-navigater-is-selected': selectedUserNavigater===4}" class="chaos-user-navigater" @click="clickNavigater(4)">
                    <icon name="chaos-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'chaos-navigater-is-selected': selectedUserNavigater===5}" class="chaos-user-navigater" @click="clickNavigater(5)">
                    <icon name="chaos-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div class="choas-divider--horizontal" style="margin-top:0px !important;"></div>

                <div v-bind:class="{'chaos-navigater-is-selected': selectedUserNavigater===6}" class="chaos-user-navigater" @click="clickNavigater(6)">
                    <icon name="chaos-exit" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">退出</span>
                </div>
            </div>
            <div class="chaos-middle-content-right">
                <div class="personal-navi-title">
                    <span style="margin-left:10px;">{{selectedUserNavigaterTitle}}</span>
                </div>
                <div v-if="selectedUserNavigater==1">
                    <personalInfo></personalInfo>
                </div>
                <div v-if="selectedUserNavigater==2" style="color:red">
                    <uploadHeadImg></uploadHeadImg>
                </div>
                <div v-if="selectedUserNavigater==3" style="color:black">待实现功能</div>
                <div v-if="selectedUserNavigater==4" style="color:black">待实现功能</div>
                <div v-if="selectedUserNavigater==5" style="color:black">待实现功能</div>
                <div v-if="selectedUserNavigater==6" style="color:black">待实现功能</div>
            </div>
        </div>
    </div>
</template>

<script>

    import personalInfo from '@/components/personalCentre/personalInfo'
    import uploadHeadImg from '@/components/personalCentre/uploadHeadImg'

    export default {
        name: 'personCentreMiddle',
        components:{personalInfo, uploadHeadImg},
        data () {
            return {
                selectedUserNavigater:1,
                selectedUserNavigaterTitle:'我的信息'
            }
        },
        methods:{
            clickNavigater(index){
                var self = this;
                if(index===1){
                    self.selectedUserNavigater = 1;
                    self.selectedUserNavigaterTitle="我的信息";
                }

                if(index===2){
                    self.selectedUserNavigater = 2;
                    self.selectedUserNavigaterTitle="我的头像";
                }

                if(index===3){
                    self.selectedUserNavigater = 3;
                    self.selectedUserNavigaterTitle="待实现功能";
                }

                if(index===4){
                    self.selectedUserNavigater = 4;
                    self.selectedUserNavigaterTitle="待实现功能";
                }

                if(index===5){
                    self.selectedUserNavigater = 5;
                    self.selectedUserNavigaterTitle="待实现功能";
                }

                if(index===6){
                    self.selectedUserNavigater = 6;
                    self.selectedUserNavigaterTitle="待实现功能";
                }
            },

        }

    }
</script>

<style scoped>
    .chaos-middle{
        width:999px;
        min-height:900px;
        margin:auto auto;
    }

    .chaos-middle-content{
        position:relative;
        top:20px;
        width:999px;
        height:800px;
        border: 1px solid #e1e2e5;
        box-shadow: 0 2px 4px rgba(0,0,0,.14);
        border-radius: 4px;
    }

    .chaos-middle-content-left{
        width:200px;
        height:800px;
        float:left;
        background-color:#FAFAFA;
    }

    .chaos-middle-content-right{
        width:798px;
        height:800px;
        border-left: 1px solid #dddddd;
        float:left;
    }

    .chaos-user-navigater{
        cursor:pointer;
        /*width:calc(100% - 40px);*/
        height:60px;
        /*margin-left:20px;*/
        line-height:60px;
    }

    .chaos-user-navigater:hover{
        background-color:#E1E4EA;
    }

    .chaos-navigater-is-selected{
        /*background-color:#ECF5FF;*/
        background-color:#00a1d7!important;
    }

    .chaos-navigater-is-selected > svg,.chaos-navigater-is-selected >span{
        color:#ffffff!important;
    }

    .personal-navi-title{
        width:100%;
        height:60px;
        border-bottom:1px solid #cccccc;
        color: #00a1d6;
        line-height:60px;
        font-size: 18px;
    }


</style>
